'use client'

import { FloatingPanel, List, NavBar, Space, Switch } from 'antd-mobile';
import { useEffect, useState } from 'react';
import Hold from './components/Hold';
import Maplayer from './components/Maplayer';
import Mapcontroller from './components/Mapcontroller';
import SetDestination from './components/SetDestination';
import SetPaths from './components/SetPaths';
import Navigiting from './components/Navigiting';
import { useEmberboxStore } from './hooks/store';

/**
 * 
 * 页面切换明亮、黑夜模式
 */

const useStyleChange = () => {


    const handleThemeColorChange = (e: any) => {
        if (e.matches) {
            // 当主题颜色变化为暗色时执行的操作
            console.log('Dark theme is active');
            document.documentElement.setAttribute(
                'data-prefers-color-scheme',
                'dark'
            )
        } else {
            // 当主题颜色变化为亮色时执行的操作
            console.log('Light theme is active');
            document.documentElement.setAttribute(
                'data-prefers-color-scheme',
                'light'
            )
        }
    }
    const darkThemeQuery: any = window.matchMedia('(prefers-color-scheme: dark)');

    darkThemeQuery.addListener(handleThemeColorChange);

    // 页面加载时触发一次事件处理程序
    handleThemeColorChange(darkThemeQuery);

}

const StateControllor = () => {
    const store: any = useEmberboxStore()
    switch (store.state) {
        case "Hold":
            return <Hold />
            break;
        case "SetDestination":
            return <SetDestination />
            break;
        case "SetPaths":
            return <SetPaths />
            break;
        case "Navigiting":
            return <Navigiting />
            break;
        default:
            return <></>
    }
}

export default function Home() {
    // const store: any = useEmberboxStore()

    useEffect(() => {
        useStyleChange()
    }, [])
    return (
        <>
            <header>
                <NavBar onBack={() => null}>标题</NavBar>
            </header>
            <main className="flex min-h-screen flex-col items-start justify-start p-0 w-full h-full theme_purple relative ">
                <Maplayer />
                {/* 控制组件 */}
                {/* {store.state !== "Navigiting" && <Mapcontroller />} */}
                <Mapcontroller />
                {/* 各种页面 */}
                <StateControllor />

            </main>
        </>

    )
}


